@if mgwt.css pretty {
	@external mgwt-HeaderPanel, mgwt-HeaderPanel-left, mgwt-HeaderPanel-right, mgwt-HeaderPanel-center, mgwt-DropDownMenu;
	@external mgwt-HeaderButton, active, back, forward, round;
}


.mgwt-HeaderPanel {
	position: relative;	
}

@if mgwt.os iphone {
	.mgwt-HeaderPanel {
		height: 40px;
		background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 50%, from(rgba(176, 188, 205, 1)), to(rgba(129, 149, 175, 1)))');
		border-bottom: 1px solid rgb(45, 54, 66);
	}
}

@if mgwt.os ipad desktop {
	.mgwt-HeaderPanel {
		height: 40px;
		background: #B0B4C0;
		background: literal('-webkit-gradient(linear,left bottom,left top,color-stop(0, #A8ACB9),color-stop(1, #eee))');
		border-bottom: 1px solid #797F90;
	}
}


@if mgwt.os android android_tablet {
	.mgwt-HeaderPanel {
		height: 50px;
		background-color: black;
		background-image: none;
		border-bottom: 2px solid rgb(82, 163, 196);
	}
}

@if mgwt.os blackberry {
	.mgwt-HeaderPanel {
		height: 40px;
		background-color: black;
		background-image: none;
		border-bottom: 2px solid #ccc;
	}
}


.mgwt-HeaderPanel .mgwt-HeaderPanel-left {
	position: absolute;
}

.mgwt-HeaderPanel .mgwt-HeaderPanel-right {
	position: absolute;
}

.mgwt-HeaderPanel .mgwt-HeaderPanel-center {
	position: absolute;
	left: 50%;
}

@if mgwt.os iphone {
	.mgwt-HeaderPanel .mgwt-HeaderPanel-left {
		top: 0px;
		left: 6px;
	}

	.mgwt-HeaderPanel .mgwt-HeaderPanel-right {
		top: 0px;
		right: 6px;
	}

	.mgwt-HeaderPanel .mgwt-HeaderPanel-center {
		left: 50%;
		height: 31px;
		width: 310px;
		
		margin-top: 6px;
		margin-left: -150px;
		margin-right: 5px;
		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		
		font-size: 16pt;
		font-weight: bold;
		color: white;
		text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
		
	}
}

@if mgwt.os ipad desktop {
	.mgwt-HeaderPanel .mgwt-HeaderPanel-left {
		top: 0px;
		left: 6px;
	}

	.mgwt-HeaderPanel .mgwt-HeaderPanel-right {
		top: 0px;
		right: 6px;
	}

	.mgwt-HeaderPanel .mgwt-HeaderPanel-center {
		left: 50%;
		height: 31px;
		width: 310px;
		
		margin-top: 6px;
		margin-left: -150px;
		margin-right: 5px;
		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		
		font-size: 16pt;
		font-weight: bold;
		color: #75777b;
		text-shadow: 0px 1px 0px white;
		
	}
}

@if mgwt.os blackberry {
	.mgwt-HeaderPanel .mgwt-HeaderPanel-left {
		top: 0px;
		left: 6px;
	}
	
	.mgwt-HeaderPanel .mgwt-HeaderPanel-right {
		top: 0px;
		right: 6px;
	}
	
	.mgwt-HeaderPanel .mgwt-HeaderPanel-center {
		left: 50%;
		height: 31px;
		width: 310px;
		opacity: 1;
		
		
		margin-top: 6px;
		margin-left: -150px;
		margin-right: 5px;
		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		
		font-size: 16pt;
		font-weight: bold;
		color: white;
		text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
		
		
	}
}

@if mgwt.os android android_tablet {
	.mgwt-HeaderPanel .mgwt-HeaderPanel-left {
		top: 6px;
		left: 6px;
	}
	
	.mgwt-HeaderPanel .mgwt-HeaderPanel-right {
		top: 6px;
		right: 6px;
	}
	
	.mgwt-HeaderPanel .mgwt-HeaderPanel-center {
		left: 50%;
		height: 31px;
		width: 310px;
		opacity: 1;
		margin-left: -150px;
		margin-top: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		
		font-size: 24px;
		color: white;
		text-shadow: rgba(0, 0, 0, .6) 0px -1px 0px;
		
		
	}
}

/*rgb(46, 54, 60)*/

.mgwt-HeaderButton {
	z-index: 1;
	margin: 6px 0 0 12px;
	height: 26px;
}

.mgwt-HeaderButton p { 
	\-webkit-background-origin: border-box;
    position: relative; 
    z-index: 2; 
    border: 1px solid rgba(0, 0, 0, 0.5);
    margin: 0; 
    padding: 5px; 
    font-size: 12px; 
    text-align: center;
    min-width: 40px;
	max-width: 60px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	\-webkit-border-radius: 4px;
	
}
@if mgwt.os iphone {
	.mgwt-HeaderButton p {
		color: #fff; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa) )');
		text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
		color: white;
		font-weight: bold; 
	}
	
	.mgwt-HeaderButton.active p{
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(#7582a4), to(#283d6f), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa) )');
	}
}

@if mgwt.os ipad desktop {
	.mgwt-HeaderButton p {
		color: #fff; 
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(178, 182, 188)), to(rgb(108, 115,126)))');
		text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
		color: white;
		font-weight: bold; 
	}
	
	.mgwt-HeaderButton.active p{
		background-image: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(138, 142, 148)), to(rgb(68, 75,86)))');
	}
}

@if mgwt.os android android_tablet {
	.mgwt-HeaderButton p {
		color: white;
		border: 2px solid rgb(82, 163, 196);
	}
	.mgwt-HeaderButton.active p{
		background: literal('-webkit-gradient(linear, left top, left bottom, from(rgb(42, 123, 156)), to(rgb(32, 113, 146)) )');
	}
}

@if mgwt.os blackberry {
	.mgwt-HeaderButton p {
		color: white;
		border: 2px solid #ccc;
	}
}

.mgwt-HeaderButton.back p { 
    border-left: none;
}

.mgwt-HeaderButton.back div {
	position: absolute;
	z-index: 1;
	top: 4.5px;
	left: -7.5px;
	\-webkit-transform: rotate(54deg);
}
.mgwt-HeaderButton.back span { 
    \-webkit-transform: skew(15deg);
    display: block; 
    width: 17px; 
    height: 17px; 
    \-webkit-border-radius: 1px; 
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-right: none;
    border-top:none;
    \-webkit-border-radius: 4px;
}

@if mgwt.os iphone {
	.mgwt-HeaderButton.back span { 
    	background-image: literal('-webkit-gradient(linear, left top, right bottom, from(#9fb3cc), to(#5b80ab), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa))');     
	}
	
	.mgwt-HeaderButton.active span{
		background: literal('-webkit-gradient(linear, left top, right bottom, from(#7582a4), to(#283d6f), color-stop(0.5, #6b8bb2), color-stop(0.51, #597eaa) )');
	}
}



@if mgwt.os ipad desktop {
	.mgwt-HeaderButton.back span {
		background-image: literal('-webkit-gradient(linear, left top, right bottom, from(rgb(178, 182, 188)), to(rgb(108, 115,126)))');
		text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
		color: white;
		font-weight: bold; 
	}
	.mgwt-HeaderButton.active span{
		background-image: literal('-webkit-gradient(linear, left top, right bottom, from(rgb(138, 142, 148)), to(rgb(68, 75,86)))');
	}
}

@if mgwt.os android android_tablet {
	.mgwt-HeaderButton.back span {
		background-image: none;
		color: white;
		border: 2px solid rgb(82, 163, 196);
    	border-right: none;
    	border-top:none;
    	 \-webkit-box-shadow: none;	
	}
	
	.mgwt-HeaderButton.active span{
		background: literal('-webkit-gradient(linear, left top, right bottom, from(rgb(42, 123, 156)), to(rgb(32, 113, 146)) )');
	}
}

@if mgwt.os blackberry {
	.mgwt-HeaderButton.back span { 
    	/* TODO */
	}
	
	.mgwt-HeaderButton.active span{
		/* TODO  asdf*/
		
	}
}








.mgwt-HeaderButton.forward div {
	position: absolute;
	z-index: 1;
	top: 4px;
	right: -7px;
	\-webkit-transform: rotate(51deg);
}

.mgwt-HeaderButton.round{
}
	
	




.mgwt-DropDownMenu .mgwt-HeaderPanel{
	padding: 0px 10px;
	height: 40px;
	\-webkit-border-top-left-radius: 8px;
	\-webkit-border-top-right-radius: 8px;
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7e838d), color-stop(0.5, #303648), color-stop(0.5, #121b2e), to(#131b2f) )');
	position: relative;
	border-bottom: 0;
	
}

.mgwt-DropDownMenu .mgwt-HeaderButton.back span { 
    
   background-image: literal('-webkit-gradient(linear, left top, right bottom, from(#7d828c),color-stop(0.5, #303749), color-stop(0.5, #121a2e), to(#121a2e))');   
 
}

.mgwt-DropDownMenu .mgwt-HeaderButton
		{
			color: #ffffff;
			text-decoration: none;
			display: inline-block;
			/*padding: 4px 10px;*/
			\-webkit-border-radius: 5px;
			margin-top: 6px;
			background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#7d828c),color-stop(0.5, #303749), color-stop(0.5, #121a2e), to(#121a2e))');
			border: solid 1px rgba(79, 79, 79, 0.75);
			\-webkit-box-shadow: none;
			
		}

.mgwt-DropDownMenu .mgwt-HeaderButton.active {
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e636d), color-stop(0.5, #101628), color-stop(0.5, #00000e), to(#00000f) )');
}

.mgwt-DropDownMenu .mgwt-HeaderButton.active span { 
    
   background-image: literal('-webkit-gradient(linear, left top, right bottom, from(#5d626c),color-stop(0.5, #101729), color-stop(0.5, #00000e), to(#00000e))');   
 
}


